<template>
  <div>
    <div class="px-[15px]">
      <van-form label-align="top" ref="formRef">
        <van-cell-group inset>
          <van-field
            v-model="Info.old_pwd"
            name="原密码"
            label="原密码"
            type="password"
            placeholder="请输入原密码"
            :rules="[{ required: true, message: '请输入原密码' }]"
          />
          <van-field
            v-model="Info.password"
            type="password"
            name="新密码"
            label="新密码"
            placeholder="请输入新密码"
            :rules="[{ required: true, message: '请输入新密码' }]"
          />
          <van-field
            v-model="Info.confirmPsd"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="请输入确认密码"
            :rules="[{ required: true, message: '请输入确认密码' }]"
          />
        </van-cell-group>
      </van-form>
    </div>
    <div class="mt-[50px] w-full flex justify-center items-center">
      <div
        @click="edit"
        class="w-[300px] h-[50px] flex justify-center items-center text-white rounded-[40px]"
        style="background: linear-gradient(180deg, #f3a140 0%, #f38e40 100%)"
      >
        确认修改
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { showToast, type FormInstance } from "vant";
import { reactive, ref } from "vue";
import { setPwd } from "@/utils/api";
import { useRouter } from "vue-router";
const Info = reactive({
  old_pwd: "",
  password: "",
  confirmPsd: "",
});
const router = useRouter();
const formRef = ref<FormInstance>();
const edit = () => {
  formRef.value?.validate().then(async () => {
    if (Info.password !== Info.confirmPsd) {
      return showToast("两次密码不一致");
    }
    const res = await setPwd(Info);
    if (res.code == 1) {
      router.push("/index/login");
    }
    showToast(res.msg);
  });
};
</script>
